<template>
  <z-paging 
    ref="pagingRef" 
    v-model="dataList" 
    @query="queryList"
    :auto-show-system-loading="false"
    :paging-enabled="false"
    :auto-show-back-to-top="false"
    :loading-more-enabled="false"
  >
    <template #top>
      <wd-navbar 
        title="产品相关" 
        custom-class="navbar-custom" 
        :bordered="false" 
        safeAreaInsetTop
        left-arrow
        @click-left="goBack"
      ></wd-navbar>
    </template>
    
    <view class="px-[30rpx] pt-[30rpx]">
      <!-- 列表项 -->
      <view 
        v-for="item in dataList" 
        :key="item.id"
        class="mb-[24rpx] bg-white rounded-[16rpx] p-[30rpx] relative"
        :class="[
          selectedId == item.id ? 'selected-item' : '',
          item.status == 'completed' ? 'completed-item' : ''
        ]"
        @click="handleSelectItem(item)"
      >
        
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import { ref } from 'vue'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

defineOptions({
  name: 'ProductRelated',
})

const pagingRef = ref(null)
const dataList = ref([])
// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 选择列表项
const handleSelectItem = (item) => {

}

// 查询列表数据
const queryList = (pageNo, pageSize) => {
  // 使用假数据模拟
  setTimeout(() => {
    const mockData = [

    ]
    
    dataList.value = mockData
    pagingRef.value?.complete(mockData)
  }, 500)
}
</script>

<style>
page {
  background-color: #F1F1F1;
}
</style>

<style scoped>

</style>
